<template>
  <div class="login-input__container">
    <label>
      <input
        :autocomplete="autocomplete"
        :class="{active: errMessage !== ''}"
        :type="type"
        :placeholder="placeholder"
        :maxlength="maxlength"
        :value="value"
        @input="onInput"
        @focus="cancelCheck"
        @blur="handleCheck"
      >
    </label>
    <div class="icon-box" @click="handleShow" v-if="inputType === '2'">
      <yun-icon :name="iconName" size="13px" color="#666"></yun-icon>
    </div>
    <div class="code-box" v-if="inputType === '3'">
      <span class="input-box__right" v-if="!isCount" @click="handleCountdown">发送验证码</span>
      <span class="input-box__right" v-if="isCount">{{countdown}} 秒后重试</span>
    </div>
    <p class="error-prompt">{{errMessage}}</p>
  </div>
</template>

<script>

export default {
  props: {
    inputType: {                     // 控制 密码框  短信框
      type: String,
      default: '1'
    },
    type: {                          // 输入框 默认type
      type: String,
      default: 'text'
    },
    isCount: {                       // 开启倒计时
      type: Boolean,
      default: false
    },
    autocomplete: {
      type: String,
      default: 'on'
    },
    placeholder: String,
    errorMessage: String,            // 错误信息
    value: String
  },
  data() {
    return {
      iconName: 'invisible',
      countdown: 60
    }
  },
  computed: {
    maxlength: function () {
      if (this.inputType === '3') {
        return 6
      } else if (this.inputType === '2') {
        return 16
      } else {
        return 35
      }
    },
    errMessage: {
      get: function () {
        return this.errorMessage
      }
    }
  },
  methods: {
    onInput(e) {
      let value = e.target.value;
      this.$emit('input', value);
    },
    // 光标移开触发事件
    handleCheck() {
      this.$emit('handleCheck');
    },
    // 光标focus触发事件
    cancelCheck() {
      this.$emit('cancelCheck');
    },
    // 控制密码 显隐
    handleShow() {
      this.iconName = this.iconName === 'visible' ? 'invisible' : 'visible';
      // this.type = this.type === 'password' ? 'text' : 'password';
      this.$emit('handleShowPassword')
    },
    // 短信倒计时
    handleCountdown() {
      this.$emit('sendSms');  // 发送短信
    }
  },
  watch: {
    isCount: function (val) {
      if (val) {
        this.countdown = 60;
        let interval = setInterval(() => {
          this.countdown--;
        }, 1000);
        setTimeout(() => {
          clearInterval(interval);
        }, 60000);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .active {
    @extend %animate-transition;
    border: 1*$length solid #FF7474 !important;
  }
  .login-input__container{
    position: relative;
    input {
      width: 100%;
      height: 48*$length;
      box-sizing: border-box;
      border: 1*$length solid transparent;
      @include border-radius(4*$length);
      padding-left: 16*$length;
      font-size: 14*$length;
      color: #999;
      background-color: #F4F8FA;
    }
    .icon-box{
      position: absolute;
      right: 16*$length;
      top: 14*$length;
      @extend %cursorPointer;
    }
    .code-box{
      position: absolute;
      right: 16*$length;
      top: 14*$length;
      @extend %cursorPointer;
      @include fontStyle(14, 20, 500, #75D098, left);
    }
    .error-prompt{
      padding-top: 4*$length;
      padding-left: 4*$length;
      margin-bottom: 10*$length;
      @extend %animate-transition;
      @include fontStyle(12, 16, 500, #FF7474, left);
    }
  }
</style>
